<template>
  <div class="app-container">
    <el-alert
    v-if="hasEnrooled"
    title="温馨提示"
    type="warning"
    description="已报名的线索仅能添加报名课程"
    show-icon>
  </el-alert>

    <el-form
      ref="createClueForm"
      :model="createClueForm"
      :rules="rules"
      label-width="100px"
      label-position="top"
    >
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <div v-loading="formLoading" class="text item" >
          <el-row :gutter="100">
            <el-col :span="8">
              <el-form-item label="校区" prop="orgId">
                <el-select
                  v-model="createClueForm.orgId"

                  placeholder="请选择校区"
                  @change="handleOrgChange(createClueForm.orgId)"
                  style="width:100%"
                  :disabled="hasEnrooled"
                >
                  <el-option
                    v-for="option in orgIdOptions"
                    :key="option.key"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="渠道" prop="channelIdList">
                <el-cascader
                  show-all-levels
                  clearable
                  placeholder="请选择渠道"
                  v-model="createClueForm.channelIdList"
                  style="width:100%"
                  :options="channelIdOptions"
                  :disabled="hasEnrooled"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="姓名" prop="customerName">
                <el-input v-model="createClueForm.customerName" :disabled="hasEnrooled" placeholder="请输入客户姓名"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="8">
              <el-form-item label="年龄" prop="customerAge">
                <el-input v-model="createClueForm.customerAge" :disabled="hasEnrooled" placeholder="请输入客户年龄"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="customerGender">
                <el-select
                  v-model="createClueForm.customerGender"
                  placeholder="请选择客户性别"
                  style="width:100%"
                  :disabled="hasEnrooled"
                >
                  <el-option label="男" value="M"></el-option>
                  <el-option label="女" value="F"></el-option>
                  <el-option label="未知" value="X"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电话" prop="customerPhone">
                <el-input v-model="createClueForm.customerPhone" :disabled="hasEnrooled" placeholder="请输入客户电话"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="24">
              <el-form-item label="备注" prop="customerRemark">
                <el-input v-model="createClueForm.customerRemark" type="textarea" :disabled="hasEnrooled"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>咨询信息</span>
        </div>
        <div class="text item" v-loading="formLoading">
          <el-row :gutter="100">
            <el-col :span="8">
              <el-form-item label="咨询时间">
                <el-input v-model="createTime" disabled="true" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="24">
              <el-form-item label="咨询课程" prop="clueCourIdList">
                <el-select
                  multiple
                  v-model="createClueForm.clueCourIdList"
                  placeholder="请选择"
                  style="width:100%"
                  :disabled="hasEnrooled"
                >
                  <el-option-group
                    v-for="group in clueCourIdOptions"
                    :key="group.label"
                    :label="group.label"
                  >
                    <el-option
                      v-for="item in group.children"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>线索信息</span>
        </div>
        <div class="text item" v-loading="formLoading">
          <el-row :gutter="100">
            <el-col :span="8">
              <el-form-item label="线索质量" prop="isPromiseVisit">
                <el-radio v-model="createClueForm.isAvailable" @change="handleIsAvailableChange" label="1" border :disabled="hasEnrooled">有效</el-radio>
                <el-radio v-model="createClueForm.isAvailable" @change="handleIsAvailableChange" label="0" border :disabled="hasEnrooled">无效</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="线索分类" prop="isPromiseVisit">
                <el-select
                  clearable
                  placeholder="请选择"
                  style="width:100%"
                  v-model="createClueForm.clueStatusCode"
                  :disabled="hasEnrooled"
                >
                  <el-option
                    v-for="option in clueStatusCodeOptions"
                    :key="option.key"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否置顶" prop="isTop">
                <el-radio v-model="createClueForm.isTop" label="1" border :disabled="hasEnrooled">置顶</el-radio>
                <el-radio v-model="createClueForm.isTop" label="0" border :disabled="hasEnrooled">不置顶</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>到访信息</span>
        </div>
        <div class="text item" v-loading="formLoading">
          <el-row :gutter="100">
            <el-col :span="8">
              <el-form-item label="承诺到访" prop="isPromiseVisit">
                <el-radio v-model="createClueForm.isPromiseVisit" label="0" border :disabled="hasEnrooled">未承诺到访</el-radio>
                <el-radio v-model="createClueForm.isPromiseVisit" label="1" border :disabled="hasEnrooled">承诺到访</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="诺到访时间"
                :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change'
                }"
                prop="promiseVisitDate"
                v-if="this.createClueForm.isPromiseVisit == 1"

              >
                <el-date-picker
                  style="width:100%"
                  v-model="createClueForm.promiseVisitDate"
                  align="right"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  :picker-options="datePickerOptions"
                  :disabled="hasEnrooled"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="8">
              <el-form-item
                label="确定时间"
                prop="isSureVisit"
                :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change'
                }"
                v-if="this.createClueForm.isPromiseVisit == 1"
              >
                <el-radio v-model="createClueForm.isSureVisit" label="0" border :disabled="hasEnrooled">未确定时间</el-radio>
                <el-radio v-model="createClueForm.isSureVisit" label="1" border :disabled="hasEnrooled">确定时间</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="诺到访时间"
                prop="sureVisitDate"
                :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change'
                }"
                v-if="this.createClueForm.isSureVisit == 1 && this.createClueForm.isPromiseVisit == 1"
              >
                <el-time-picker
                  style="width:100%"
                  v-model="createClueForm.sureVisitDate"
                  placeholder="选择时间"
                  format="HH:mm:ss"
                  value-format="HH:mm:ss"
                  :disabled="hasEnrooled"
                ></el-time-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="8">
              <el-form-item label="是否到访" prop="isVisit">
                <el-radio v-model="createClueForm.isVisit" label="0" border :disabled="hasEnrooled">否</el-radio>
                <el-radio v-model="createClueForm.isVisit" label="1" border :disabled="hasEnrooled">是</el-radio>
              </el-form-item>
            </el-col>

            <el-col :span="8" v-if="this.createClueForm.isVisit == 1">
              <el-form-item prop="visitTime"
                 :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change'
                }" label="到访时间">
                <el-date-picker
                  style="width:100%"
                  v-model="createClueForm.visitTime"
                  align="right"
                  type="datetime"
                  placeholder="选择日期"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="datePickerOptions"
                  :disabled="hasEnrooled"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="24">
              <el-form-item
                prop="noVisitReason"
                label="未到访原因"
                v-if="this.createClueForm.isVisit == 0"
              >
                <el-input v-model="createClueForm.noVisitReason" type="textarea" :disabled="hasEnrooled"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card" shadow="never" v-if="this.createClueForm.isVisit == 1">
        <div slot="header" class="clearfix">
          <span>试听信息</span>
        </div>
        <div class="text item">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="是否试听" prop="isAudition">
                <el-radio v-model="createClueForm.isAudition" label="0" border :disabled="hasEnrooled">未试听</el-radio>
                <el-radio v-model="createClueForm.isAudition" label="1" border :disabled="hasEnrooled">已试听</el-radio>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="10" v-if="this.createClueForm.isAudition == 1">
            <el-col :span="6">
              <el-form-item
                v-for="(audition, index) in createClueForm.auditionList"
                :label="'试听课名称-' + (index+1)"
                :key="audition.key"
                :prop="'auditionList.' + index + '.courseId'"
                :rules="{
      required: true, message: '请选择试听课程', trigger: 'change'
    }"
              >
                <el-select
                  v-model="audition.courseId"
                  @change="getCity(audition)"
                  placeholder="请选择"
                  style="width:100%"
                  clearable
                  :disabled="hasEnrooled"
                >
                  <el-option-group
                    v-for="group in clueCourIdOptions"
                    :key="group.label"
                    :label="group.label"
                  >
                    <el-option
                      v-for="item in group.children"
                      v-show="isSelect(item.value, audition.courseId)"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                v-for="(audition, index) in createClueForm.auditionList"
                :label="'试听课老师-' +(index+1)"
                :key="audition.key"
                :prop="'auditionList.' + index + '.teacherId'"
                :rules="{
      required: true, message: '请选择听课老师', trigger: 'change'
    }"
              >
                <el-select
                  clearable
                  v-model="audition.teacherId"
                  placeholder="请选择"
                  style="width:100%"
                  :disabled="hasEnrooled"
                >
                  <el-option
                    v-for="option in teacherOptionGroups[index]"
                    :key="option.key"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                v-for="(audition, index) in createClueForm.auditionList"
                :label="'试听时间-' + (index+1)"
                :key="audition.key"
                :prop="'auditionList.' + index + '.courseTime'"
                :rules="{
      required: true, message: '请选择试听时间', trigger: 'change'
    }"
              >
                <el-date-picker
                  style="width:100%"
                  v-model="audition.courseTime"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :picker-options="datePickerOptions"
                  :disabled="hasEnrooled"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                v-for="(audition) in createClueForm.auditionList"
                :label="'操作'"
                :key="audition.key"
              >
                <el-button @click.prevent="removeAudition(audition)" :disabled="hasEnrooled">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>

          <el-button @click="addAudition" v-if="this.createClueForm.isAudition == 1" :disabled="hasEnrooled">新增试听课程</el-button>
        </div>
      </el-card>

      <el-card class="box-card" shadow="never" >
        <div slot="header" class="clearfix">
          <span>报名信息</span>
        </div>
        <div class="text item">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="是否报名" prop="isEnroll" :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
                <el-radio v-model="createClueForm.isEnroll" label="0" border :disabled="hasEnrooled">否</el-radio>
                <el-radio v-model="createClueForm.isEnroll" label="1" border :disabled="hasEnrooled || this.createClueForm.isAvailable == 0" >是</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="24">
              <el-form-item

                v-if="this.createClueForm.isEnroll == 0"
                label="未报名原因"
                prop="noEnrollReason"
              >
              <el-select
                  v-model="createClueForm.noEnrollReason"
                  placeholder="请选择"
                  style="width:100%"
                  :disabled="hasEnrooled"
                >
                  <el-option label="暂时不选" value="0"></el-option>
                  <el-option label="距离远" value="1"></el-option>
                  <el-option label="价格高" value="2"></el-option>
                   <el-option label="有更好选择" value="3"></el-option>
                  <el-option label="其他" value="4"></el-option>
                </el-select>

              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="24">
              <el-form-item
                v-if="this.createClueForm.isEnroll == 0"
                label="未报名原因补充"
                prop="noEnrollReasonRemark"
                :disabled="hasEnrooled"
              >
                <el-input type="textarea" v-model="createClueForm.noEnrollReasonRemark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="10" v-if="this.createClueForm.isEnroll == 1">
            <el-col :span="3">
              <el-form-item
                v-for="(enrollCourse, index) in createClueForm.enrollCourseList"
                :label="'报名课程-' + (index+1)"
                :key="enrollCourse.key"
                :prop="'enrollCourseList.' + index + '.courseId'"
                :rules="{
      required: true, message: '请选择报名课程', trigger: 'change'
    }"
              >
                <el-select
                  v-model="enrollCourse.courseId"
                  placeholder="请选择"
                  style="width:100%"
                  clearable
                  :disabled= "enrollCourse.enrollCourseId != null"
                >
                  <el-option-group
                    v-for="group in clueCourIdOptions"
                    :key="group.label"
                    :label="group.label"
                  >
                    <el-option
                      v-for="item in group.children"
                      v-show="isSelectTwo(item.value, enrollCourse.courseId)"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item
                v-for="(enrollCourse, index) in createClueForm.enrollCourseList"
                :label="'报名时间-' + (index+1)"
                :key="enrollCourse.key"
                :prop="'enrollCourseList.' + index + '.enrollTime'"
                :rules="{
      required: true, message: '请选择报名时间', trigger: 'change'
    }"
              >
                <el-date-picker
                  style="width:100%"
                  v-model="enrollCourse.enrollTime"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :picker-options="datePickerOptions"
                  :disabled= "enrollCourse.enrollCourseId != null"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item
                v-for="(enrollCourse, index) in createClueForm.enrollCourseList"
                :label="'报名金额-' +(index+1)"
                :key="enrollCourse.key"
                :prop="'enrollCourseList.' + index + '.enrolPrice'"
                :rules="{
      required: true, message: '请填写报名金额', trigger: 'blur'
    }"
              >
                <el-input v-model="enrollCourse.enrolPrice" :disabled= "enrollCourse.enrollCourseId != null" type="number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item
                v-for="(enrollCourse, index) in createClueForm.enrollCourseList"
                :label="'材料费-' + (index+1)"
                :key="enrollCourse.key"
                :prop="'enrollCourseList.' + index + '.materialCost'"
                :rules="{
      required: true, message: '请填写材料费', trigger: 'blur'
    }"
              >
                <el-input v-model="enrollCourse.materialCost" :disabled= "enrollCourse.enrollCourseId != null" type="number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item
                v-for="(enrollCourse, index) in createClueForm.enrollCourseList"
                :label="'课时-' + (index+1)"
                :key="enrollCourse.key"
                :prop="'enrollCourseList.' + index + '.courseTime'"
                :rules="{
      required: true, message: '请填写课时', trigger: 'blur'
    }"
              >
                <el-input v-model="enrollCourse.courseTime" :disabled= "enrollCourse.enrollCourseId != null" type="number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item
                v-for="(enrollCourse, index) in createClueForm.enrollCourseList"
                :label="'赠送课时-' + (index+1)"
                :key="enrollCourse.key"
                :prop="'enrollCourseList.' + index + '.extraCourseTime'"
                :rules="{
      required: true, message: '请填写赠送课时', trigger: 'blur'
    }"
              >
                <el-input v-model="enrollCourse.extraCourseTime" :disabled= "enrollCourse.enrollCourseId != null" type="number"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="3">
              <el-form-item
                v-for="(enrollCourse) in createClueForm.enrollCourseList"
                :label="'操作'"
                :key="enrollCourse.key"
              >
                <el-button @click.prevent="removeEnrollCourse(enrollCourse)" :disabled= "enrollCourse.enrollCourseId != null">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-button @click="addEnrollCourse" v-if="this.createClueForm.isEnroll == 1">新增报名课程</el-button>
        </div>
      </el-card>

      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>跟进信息</span>
        </div>
        <div class="text item" v-loading="formLoading">
          <el-row :gutter="100">
            <el-col :span="8">
              <el-form-item label="分配咨询师" prop="ownerId">
                <el-select
                  clearable
                  v-model="createClueForm.ownerId"
                  placeholder="请选择"
                  style="width:100%"
                  :disabled="hasEnrooled"
                >
                  <el-option
                    v-for="option in ownerIdOptions"
                    :key="option.key"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="下次跟进时间(提醒咨询师跟进时间)" prop="nextFollowTime">
                <el-date-picker
                  style="width:100%"
                  v-model="createClueForm.nextFollowTime"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  :picker-options="nextFollowTimePickerOptions"
                  :disabled="hasEnrooled"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="跟进信息" prop="updateInfo">
                <el-input v-model="createClueForm.updateInfo" type="textarea" :disabled="hasEnrooled"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>跟进记录</span>
        </div>
        <div
          class="text item"
          v-loading="formLoading"
          v-for="(updateRecord) in createClueForm.updateRecordList"
          :key="updateRecord.key"
        >
          <el-row :gutter="10" style="marign-bottom:10px">
            <el-col :span="24">
              <el-card class="update-record-info" :body-style="{ padding: '2px',fontSize:'14px' }">
                <div style="padding: 14px;">
                  <div class="update-info">{{updateRecord.updateInfo}}</div>
                  <div class="bottom clearfix">
                    <time class="time">{{updateRecord.createTime}}</time>
                    <span class="time">{{updateRecord.creatorName}}</span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <!-- <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>跟进信息</span>
        </div>
        <div class="text item" v-loading="formLoading">
          <el-row :gutter="100">

          </el-row>
        </div>
      </el-card> -->
      <el-form-item>
        <el-button
          :loading="submitLoading"
          type="primary"
          @click="submitForm('createClueForm')"
        >提交</el-button>
        <el-button @click="resetForm('createClueForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  //渠道信息
  fetchOrg,
  fetchChannel,
  fetchCourse,
  fetchTeahcer,
  fetchOwner,
  createClue,
  fetchClue,
  updateClue
  //课程信息
  //老师信息
  //咨询师
} from "@/api/clue";
import waves from "@/directive/waves"; // 水波纹指令
import { parseTime } from "@/utils";

export default {
  name: "Dashboard",
    data() {
      return {
        hasEnrooled: false,
        createTime: "",
        formLoading: true,
        submitLoading: false,
        channelIdOptions: [],
        orgIdOptions: [],
        clueStatusCodeOptions: [
          { value: "1", label: "有需求" },
          { value: "2", label: "有意向" },
          { value: "3", label: "有望成交" },

        ],
        teacherOptions: [],
        teacherOptionGroups: [],
        clueCourIdOptions: [],
        // noEnrollReasonOptions: [],

        datePickerOptions: {
          // disabledDate(time) {
          //   return time.getTime() > Date.now();
          // },
          shortcuts: [
            {
              text: "今天",
              onClick(picker) {
                picker.$emit("pick", new Date());
              }
            },
            {
              text: "昨天",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", date);
              }
            },
            {
              text: "一周前",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", date);
              }
            }
          ]
        },

        ownerIdOptions: [],
        nextFollowTimePickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now();
          },
          shortcuts: [
            {
              text: "明天",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() + 3600 * 1000 * 24);
                picker.$emit("pick", date);
              }
            },
            {
              text: "一周后",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
                picker.$emit("pick", date);
              }
            }
          ]
        },

        createClueForm: {
          //数据模型
          clueId: "",
          //渠道id
          channelId: "",
          channelIdList: [],

          //线索客户姓名
          customerName: "",

          //线索客户年龄
          customerAge: "",

          //线索客户性别
          customerGender: "",

          //线索客户电话
          customerPhone: "",

          //线索备注
          customerRemark: "",

          //2.咨询信息
          clueCourIdList: [],

          //线索是否有效
          isAvailable: "1",
          clueStatusCode: "",
          isTop: "1",

          //承诺到访状态 0:否；1:是
          isPromiseVisit: "0",

          //承诺到访日期
          promiseVisitDate: "",

          //确定到访状态 0:否；1:是
          isSureVisit: "0",

          //确定到访时间
          sureVisitDate: "",

          //是否到访状态 0:否；1:是
          isVisit: "0",

          //未到访原因
          noVisitReason: "",

          //到访时间
          visitTime: "",

          //是否试听状态 0:否；1:是
          isAudition: "0",
          //4.试听信息
          auditionList: [{}],

          //是否报名状态 0:否；1:是
          isEnroll: "0",
          //5.报名信息
          enrollCourseList: [{}],

          //未报名原因
          noEnrollReason: "",

          //未报名原因备注
          noEnrollReasonRemark: "",
          //下次跟进日期
          nextFollowTime: "",

          //线索创建后分配到哪个用户名下
          ownerId: "",
          //跟进信息
          updateInfo: "",

          //根据记录
          updateRecordList: []
        },
        rules: {
          channelIdList: [
            {
              type: "array",
              required: true,
              message: "请选择渠道",
              trigger: "change"
            }
          ],
          customerName: [
            { required: true, message: "请输入客户姓名", trigger: "blur" }
          ],
          customerGender: [
            { required: true, message: "请选择客户性别", trigger: "change" }
          ],
          customerPhone: [
            {
              pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
              required: true,
              message: "请输入正确的手机号",
              trigger: "blur"
            },
            {
              min: 11,
              max: 11,
              message: "长度在 11 到 11 个字符",
              trigger: "blur"
            }
          ],
          orgId: [{ required: true, message: "请选择校区", trigger: "change" }],
          clueCourIdList: [
            {
              type: "array",
              required: true,
              message: "请至少选择一个课程",
              trigger: "change"
            }
          ],
          ownerId: [
            {
              required: true,
              message: "请选择咨询师",
              trigger: "change"
            }
          ]
        }
      };
  },
  mounted() {
    //this.getChannelOptios();
    this.getOrgIdOptions();
    const id = this.$route.query && this.$route.query.id;
    this.fetchData(id);
  },
  watch: {
    "createClueForm.orgId": {
      handler(newOrhId, oldOrgId) {},
      deep: true,
      immediate: true
    },
    // "createClueForm.isAvailable": {
    //   handler(newIsAvailable, oldIsAvailable) {
    //     this.createClueForm.clueStatusCode = "";
    //     if (newIsAvailable == "1") {
    //       this.clueStatusCodeOptions = [
    //         { value: "1", label: "有需求" },
    //         { value: "2", label: "有意向" },
    //         { value: "3", label: "有望成交" },
    //       ];
    //     } else {
    //       this.clueStatusCodeOptions = [
    //         { value: "4", label: "无法联系" },
    //         { value: "5", label: "无需求" },
    //         { value: "6", label: "号码错误" },
    //       ];
    //       this.createClueForm.isEnroll = "0";
    //     }
    //   },
    //   deep: true,
    //   immediate: true
    // },

    "createClueForm.isAudition": {
      handler(newIsAudition, oldIsAudition) {
        if (newIsAudition == 1) {
          if (this.createClueForm.auditionList.length == 0) {
            this.addAudition();
          }
        }
      },
      deep: true,
      immediate: true
    },
    "createClueForm.isEnroll": {
      handler(newIsEnroll, oldIsEnroll) {
        if (newIsEnroll == 1) {
          if (this.createClueForm.enrollCourseList.length == 0) {
            this.addEnrollCourse();
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {

    handleIsAvailableChange(){
      const newIsAvailable = this.createClueForm.isAvailable
      this.createClueForm.clueStatusCode = "";
      if (newIsAvailable == "1") {
        this.clueStatusCodeOptions = [
          { value: "1", label: "有需求" },
          { value: "2", label: "有意向" },
          { value: "3", label: "有望成交" },
        ];
      } else {
        this.clueStatusCodeOptions = [
          { value: "4", label: "无法联系" },
          { value: "5", label: "无需求" },
          { value: "6", label: "号码错误" },
        ];
        this.createClueForm.isEnroll = "0";
      }
    },

    //获取所有校区()
    getOrgIdOptions() {
      const queryMethod = "queryClueOrStatistic"
      fetchOrg(queryMethod).then(response => {
        this.orgIdOptions = response.data;
      });
    },
    //根据校区获取所有渠道(校区ID)
    getChannelOptions(orgId) {
      fetchChannel(orgId).then(response => {
        this.channelIdOptions = response.data;
      });
    },
    //课程（校区Id）
    getCourseOptions(orgId) {
      fetchCourse(orgId).then(response => {
        this.clueCourIdOptions = response.data;
      });
    },
    //老师(课程ID,校区ID)
    getTeahcerOptions(courseId, orgId) {
      fetchTeahcer(courseId, orgId).then(response => {
        this.teacherOptions = response.data;
      });
    },
    //咨询师(校区ID)
    getOwnerOptions(orgId) {
      fetchOwner(orgId).then(response => {
        this.ownerIdOptions = response.data;
      });
    },
    handleOrgChange(orgId) {
      //alert(orgId)

      //当学校的值发生变化时，需要做几个操作
      //1、重新渲染渠道下拉框，并将数据模型里的渠道id置空
      this.getChannelOptions(orgId);
      if (this.createClueForm.channelIdList.length > 0) {
        this.createClueForm.channelIdList = [];
      }

      //2、重新渲染所有课程下拉框，并将数据模型里的所有课程id置空
      this.getCourseOptions(orgId);
      if (this.createClueForm.clueCourIdList.length > 0) {
        this.createClueForm.clueCourIdList = [];
      }

      //清空听课列表里的所有课程、老师

      //3、清空所有老师的下拉框，并将所有老师Id都置空

      for (var i = 0; i < this.createClueForm.auditionList.length; i++) {
        if (this.createClueForm.auditionList[i].courseId) {
          this.createClueForm.auditionList[i].courseId = "";
        }
        if (this.createClueForm.auditionList[i].teacherId) {
          this.createClueForm.auditionList[i].teacherId = "";
        }
      }
      //清空所有老师下拉框的数据项
      this.teacherOptionGroups.splice(0, this.teacherOptionGroups.length);

      //清空报名列表里的所有课程
      for (var i = 0; i < this.createClueForm.enrollCourseList.length; i++) {
        if (this.createClueForm.enrollCourseList[i].courseId) {
          this.createClueForm.enrollCourseList[i].courseId = "";
        }
      }

      //4、重新渲染咨询师下拉框，并将数据模型里的咨询师id置空
      this.getOwnerOptions(this.createClueForm.orgId);
      this.createClueForm.ownerId = "";
    },
    fetchData(id) {
      fetchClue(id)
        .then(response => {
          this.createClueForm = response.data;
          this.createTime = response.data.createTime;

          //当学校的值发生变化时，需要做几个操作
          //1、重新渲染渠道下拉框，并将数据模型里的渠道id置空
          var orgId = this.createClueForm.orgId;
          this.getChannelOptions(orgId);
          // if (this.createClueForm.channelIdList.length > 0) {
          //   this.createClueForm.channelIdList = this.createClueForm.channelIdList;
          // }

          //2、重新渲染所有课程下拉框，并将数据模型里的所有课程id置空
          this.getCourseOptions(orgId);
          // if (this.createClueForm.clueCourIdList.length > 0) {
          //this.createClueForm.clueCourIdList = [];
          // }

          //清空听课列表里的所有课程、老师

          //3、清空所有老师的下拉框，并将所有老师Id都置空

          for (var i = 0; i < this.createClueForm.auditionList.length; i++) {
            var audition = this.createClueForm.auditionList[i];
            fetchTeahcer(audition.courseId, this.createClueForm.orgId).then(
              response => {
                //this.teacherOptions = response.data;
                this.teacherOptionGroups.splice(i, 1, response.data);
              }
            );

            // if (this.createClueForm.auditionList[i].courseId) {
            //   this.createClueForm.auditionList[i].courseId = "";
            // }
            // if (this.createClueForm.auditionList[i].teacherId) {
            //   this.createClueForm.auditionList[i].teacherId = "";
            // }
          }
          //清空所有老师下拉框的数据项
          this.teacherOptionGroups.splice(0, this.teacherOptionGroups.length);

          //清空报名列表里的所有课程
          // for (
          //   var i = 0;
          //   i < this.createClueForm.enrollCourseList.length;
          //   i++
          // ) {
          //   if (this.createClueForm.enrollCourseList[i].courseId) {
          //     this.createClueForm.enrollCourseList[i].courseId = "";
          //   }
          // }

          //4、重新渲染咨询师下拉框，并将数据模型里的咨询师id置空
          this.getOwnerOptions(orgId);
          //this.createClueForm.ownerId = "";
          this.hasEnrooled = (response.data.isEnroll=="1");
          this.formLoading = false;
          this.createClueForm.clueStatusCode = response.data.clueStatusCode

        })
        .catch(err => {
          this.$message({
          message: '错误',
          type: 'warning'
        });
          this.formLoading = false;
        });
    },

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.submitLoading = true;
          updateClue(this.createClueForm)
            .then(() => {
              this.submitLoading = false;
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this.$store.dispatch('QueryRemindClue').then(() => {

              }).catch(() => {

              })
              this.$router.go(-1);
            })
            .catch(err => {
              this.submitLoading = false;
            });
        } else {
          this.$message({
						message: "请正确输入所有必填的信息!",
          type: 'warning'
        });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeAudition(item) {
      var index = this.createClueForm.auditionList.indexOf(item);
      if (index !== -1) {
        this.createClueForm.auditionList.splice(index, 1);
      }
      if (this.createClueForm.auditionList.length == 0) {
        this.createClueForm.isAudition = "0";
      }
    },
    addAudition() {
      this.createClueForm.auditionList.push({
        key: Date.now()
      });
    },
    removeEnrollCourse(item) {
      var index = this.createClueForm.enrollCourseList.indexOf(item);
      if (index !== -1) {
        this.createClueForm.enrollCourseList.splice(index, 1);
      }
      if (this.createClueForm.enrollCourseList.length == 0) {
        this.createClueForm.isEnroll = "0";
      }
    },
    addEnrollCourse() {
      this.createClueForm.enrollCourseList.push({
        key: Date.now()
      });
    },
    getCity: function(audition) {
      var index = this.createClueForm.auditionList.indexOf(audition);
      //根据课程id去查询老师
      //console.table(audition)
      fetchTeahcer(audition.courseId, this.createClueForm.orgId).then(
        response => {
          //this.teacherOptions = response.data;
          this.teacherOptionGroups.splice(index, 1, response.data);
        }
      );

      //audition.teacherId = null;
      if (audition.teacherId) {
        audition.teacherId = "";
      }
    },
    isSelect(id, currentId) {
      if (currentId === id) {
        return true;
      }
      for (let i in this.createClueForm.auditionList) {
        debugger;
        if (this.createClueForm.auditionList[i].courseId === id) {
          return false;
        }
      }
      return true;
    },
    isSelectTwo(id, currentId) {
      if (currentId === id) {
        return true;
      }
      for (let i in this.createClueForm.enrollCourseList) {
        debugger;
        if (this.createClueForm.enrollCourseList[i].courseId === id) {
          return false;
        }
      }
      return true;
    }
  }
};
</script>
<style scoped>
.app-container {
  background-color: #f3f3f3;
}
.box-card {
  margin-bottom: 20px;
}

/* .update-record-info{
background-color: #f0f9eb;
} */
.update-info {
  color: #606266;
}
.time {
  font-size: 13px;
  color: #909399;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
